<template>
  <div class="list-container">
    <!-- 劳务代发2 -->
    <el-form class="search-panel" v-model="searchForm" :inline="true">
      <el-form-item label="输入搜索：" prop="name">
        <el-input
          v-model="searchForm.name"
          placeholder="输入班组长名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="发放状态：">
        <el-select v-model="searchForm.status" placeholder="请选择发放状态：">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出勤时间：">
        <el-date-picker
          v-model="searchForm.date"
          type="month"
          placeholder="选择日期"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="table-panel">
      <el-row class="table-operate">
        <el-button
          type="primary"
          icon="el-icon-document-checked"
          @click="settlement"
        >
          结算
        </el-button>
        <el-button type="primary" icon="el-icon-tickets" @click="payroll">
          发放工资单
        </el-button>
        <el-button @click="exportItems">
          导出 <i class="el-icon-upload2" />
        </el-button>
      </el-row>
      <el-row>
        <el-table
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="45" align="center">
          </el-table-column>
          <el-table-column
            prop="id"
            type="index"
            label="序号"
            width="60"
            align="center"
          >
          </el-table-column>
          <el-table-column prop="teamName" label="班组名称" align="center">
          </el-table-column>
          <el-table-column prop="name" label="人员姓名" align="center">
          </el-table-column>
          <el-table-column prop="number" label="总出勤" align="center">
            <template slot-scope="scope">
              <div>{{ scope.row.number }}天</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="referenceSalary"
            label="参考工资金额"
            align="center"
            width="120"
          >
            <template slot-scope="scope">
              <div>¥{{ scope.row.referenceSalary }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="realWages" label="实际工资" align="center">
            <template slot-scope="scope">
              <div>¥{{ scope.row.realWages }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="amountIssued"
            label="已发放工资"
            align="center"
          >
            <template slot-scope="scope">
              <div>¥{{ scope.row.amountIssued }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="undistributedAmount"
            label="未发放工资"
            align="center"
          >
            <template slot-scope="scope">
              <div>¥{{ scope.row.undistributedAmount }}</div>
            </template>
          </el-table-column>
          <el-table-column label="发放状态" align="center">
            <template slot-scope="scope">
              <div v-if="scope.row.status == 0">线下完成</div>
              <div v-else-if="scope.row.status == 1">银行待发</div>
              <div v-else>银行已发</div>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <el-row class="page">
        <div class="page-tag">
          共{{ Math.ceil(totalData / searchForm.pageSize) }}页/{{
            totalData
          }}条数据
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="searchForm.currentPage"
          :page-size="searchForm.pageSize"
          layout="sizes,prev, pager, next, jumper"
          :total="totalData"
        >
        </el-pagination>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalData: 0,
      searchForm: {
        currentPage: 1,
        pageSize: 10,
        date: null,
        name: null,
        status: -1,
        team_id: null,
        service_corporation_id: null,
      },
      statusList: [
        { value: -1, label: "全部" },
        { value: 0, label: "线下完成" },
        { value: 1, label: "银行待发" },
        { value: 2, label: "银行已发" },
      ],
      flag: 1, //1--一级劳务公司，0--二级班组
      defaultProps: {
        children: "children",
        label: "name",
      },
      tableData: [{ name: "赵柳" }],
    };
  },
  created() {
    // console.log(this.$route)
    // this.searchForm.date = this.$route.query.date;
    // this.getTableData();
  },
  methods: {
    onSubmit() {},
    // 结算
    settlement() {
      this.$confirm(
        "是否确认结算当前人员，结算后当前人员是否进行退场操作？",
        "结算",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
            // 退场
          this.$confirm(
            "请选择结算方式",
            "结算",
            {
              confirmButtonText: "线上结算",
              cancelButtonText: "线下结算",
              type: "warning",
            }
          )
            .then(() => {
                this.$router.push({path:'/agency/onlineDistribution'})
            })
            .catch(() => {
              this.$message({
                type: "none",
                message: "已选择线下结算",
              });
            });
        })
        .catch(() => {
            // 不退场
            this.$router.push({path:'/agency/onlineDistribution'})
        //   this.$message({
        //     type: "info",
        //     message: "已取消删除",
        //   });
        });
    },
    // 发放工资单
    payroll() {
      this.$router.push({path:'/agency/onlineDistribution'})
    },
    // 导出
    exportItems() {},
    // 树状图
    handleNodeClick(res) {
      // console.log(res)
      if (res.children == null) {
        // console.log("班组")
        this.flag = 0;
        this.searchForm.team_id = res.id;
        this.searchForm.service_corporation_id = null;
        // this.getTableData();
      } else {
        // console.log("劳务公司")
        this.flag = 1;
        this.searchForm.service_corporation_id = res.id;
        this.searchForm.team_id = null;
        // this.getTableData();
      }
    },
    handleSelectionChange() {},
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
    },
    handleCurrentChange(val) {
      this.searchForm.currentPage = val;
    },
  },
};
</script>